<template>
    <div id="cesiumContainer" ref="cesiumContainer"></div>
  </template>
  
  <script setup>
  // yarn add cesium
  // 将cesium目录下的Build/Cesium4个目录拷贝到public，然后将widgets目录拷贝一份到src下
  import * as Cesium from "cesium";
  import "./Widgets/widgets.css";
  import { onMounted } from "vue";
  
  // 设置cesium token
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZjJlYTllMy1kYWRiLTQwYjctOGZhOS02NGJkOTJhYTA1ODUiLCJpZCI6MjU5LCJpYXQiOjE3Mjc3OTI2NzB9.XbfI79d1v3T5OpMl4CznrcBuctSfW1lycPWlt8bq_1A";
  
  // 设置cesium静态资源路径
  window.CESIUM_BASE_URL = "/";
  
  // 设置cesium默认视角
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    // 西边的经度
    89.5,
    // 南边维度
    20.4,
    // 东边经度
    110.4,
    // 北边维度
    61.2
  );
  
  onMounted(() => {
    var viewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false,
    });
  
    // 隐藏logo
    viewer.cesiumWidget.creditContainer.style.display = "none";
  
    // 加载geojson数据
    let dataGeo = Cesium.GeoJsonDataSource.load(
      "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
      {
        stroke: Cesium.Color.RED,
        fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
        strokeWidth: 4,
      }
    )
  
    dataGeo.then(dataSources => {
      viewer.dataSources.add(dataSources)
      let entities = dataSources.entities.values
      entities.forEach((entity, i) => {
        entity.polygon.material = new Cesium.ColorMaterialProperty(
          Cesium.Color.fromRandom({
            alpha:1
          })
        )
        entity.polygon.outline = false
        let randomNum = parseInt(Math.random() * 5)
        entity.polygon.extrudedHeight = 50000 * randomNum
      })
    })
  });
  </script>
  
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  
  #cesiumContainer {
    width: 100vw;
    height: 100vh;
  }
  </style>
  